<script setup>
import { getRightsListService } from '@/api/user'
import { ArrowRight } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'

const rightsList = ref([])
const loading = ref(true)
async function getRightsList() {
  const { data: res } = await getRightsListService()
  // console.log(res)
  if (res.meta.status !== 200) {
    // eslint-disable-next-line no-undef
    return ElMessage.error('获取权限列表失败')
  }
  rightsList.value = res.data
  loading.value = false
  // eslint-disable-next-line no-undef
  ElMessage.success('获取权限列表成功')
}
onMounted(() => {
  getRightsList()
})
</script>

<template>
  <div>
    <!-- 面包屑导航区域· -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/home' }">
        首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <el-table v-loading="loading" :data="rightsList" border style="width: 100%" stripe>
        <el-table-column type="index" />
        <el-table-column label="权限名称" prop="authName" />
        <el-table-column label="路径" prop="path" />
        <el-table-column label="权限等级" prop="level">
          <template #default="{ row }">
            <el-tag v-if="row.level === '0'">
              标签一
            </el-tag>
            <el-tag v-else-if="row.level === '1'" type="success">
              标签二
            </el-tag>
            <el-tag v-else type="warning">
              标签三
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
